<template>
  <div class="flex-demo">
    <!-- 操作区 -->
    <div class="controls">
      <button @click="setDirection('row')">水平排列</button>
      <button @click="setDirection('column')">垂直排列</button>
      <button @click="setJustify('space-around')">平均分布</button>
      <button @click="setJustify('space-between')">两端对齐</button>
      <button @click="setJustify('center')">居中</button>
    </div>

    <!-- Flex 容器 -->
    <div
      class="container"
      :style="{
        flexDirection: flexDirection,
        justifyContent: justifyContent,
      }"
    >
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>

    <div>
      <img
        class="logoImage"
        src="../../assets/images/logo.png"
        alt="Paris"
        width="400"
      />
    </div>

    <div class="cirle">
      <div class="FirstItem">First Item</div>
      <div class="SecondItem">Second Item</div>
    </div>

    <div class="buttonDiv">
      <button class="button">保存</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const flexDirection = ref("row");
const justifyContent = ref("space-around");

function setDirection(direction) {
  flexDirection.value = direction;
}

function setJustify(justify) {
  justifyContent.value = justify;
}
</script>

<style scoped>
.logoImage {
  border-radius: 8px;
  background: orange;
  height: auto;
}

.cirle {
  border: 2px solid;
  border-radius: 25px;
  background: red;
  height: 100px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  /* align-items: flex-start; */
  /* gap: 20px; */
  row-gap: 20px;
  column-gap: 20px;
}

.FirstItem {
  background: white;
  /* margin-left: 12px; */
  width: 100px;
  height: 30px;
}

.SecondItem {
  background: white;
  /* margin-right: 12px; */
  width: 100px;
  height: 30px;
}

.buttonDiv {
  width: 100px;
  height: 100px;
  background: orange;
}

.button {
  width: 60px;
  height: 60px;
  background-color: #4caf50;
  text-align: center;
  display: inline-block;
  font-size: 18px;
  /* border-radius: 30px; */
  border-radius: 50%;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
}
.button:hover {
  /* background-color: #4caf50; Green */
  background-color: white;
  color: white;
}

@import "../../assets/scss/learnDiv.css";
</style>


